<template>
  <view class="container">
	  <cu-custom bgColor="" :isBack="true">
	      <block slot="backText">返回</block>
	      <block slot="content"></block>
	  </cu-custom>
	  
	  <view class="margin-top-xl padding">
		  <view class="top-rule margin-top padding text-center">
		  		  <text class="text-white text-xxl">个人资料</text>
		  </view>
		  <view class="example">
		    <uni-forms ref="form" :model="user" labelWidth="80px">
				<uni-forms-item label="用户昵称" name="nickName">
				  <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phonenumber">
				  <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email">
				  <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex" required>
				  <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
				</uni-forms-item>
		    </uni-forms>
		  </view>
		  <view class="padding bg-white bottom-rule" style="background-color: #F3F4F6;">
		  	<uni-grid :column="2" :show-border="false" >
		  		<uni-grid-item style="height: 150rpx;">
		  			<view class="padding">
		  				<button class="bg-white text-black">
		  					<!-- <uni-icons type="phone-filled"></uni-icons> -->
		  					<text class="text-xl">重置</text>
		  				</button>
		  			</view>
		  		</uni-grid-item>
		  		<uni-grid-item style="height: 150rpx;">
		  			<view class="padding">
		  				<button class="bg-grey" @click="submit">
		  					<!-- <uni-icons type="closeempty" color="#fff" ></uni-icons> -->
		  					<text class="text-xl">提交</text>
		  				</button>
		  			</view>
		  		</uni-grid-item>
		  	</uni-grid>
		  </view>
	  </view>
	  
	  
		
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"
  import { updateUserProfile } from "@/api/system/user"
  import user from "../../../store/modules/user"
  // import store from "@/store"

  export default {
    data() {
      return {
        user: {
          nickName: "",
          phonenumber: "",
          email: "",
          sex: ""
        },
        sexs: [{
          text: '男',
          value: "0"
        }, {
          text: '女',
          value: "1"
        }],
        rules: {
          nickName: {
            rules: [{
              required: true,
              errorMessage: '用户昵称不能为空'
            }]
          },
          phonenumber: {
            rules: [{
              required: true,
              errorMessage: '手机号码不能为空'
            }, {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码'
            }]
          },
          email: {
            rules: [{
              required: true,
              errorMessage: '邮箱地址不能为空'
            }, {
              format: 'email',
              errorMessage: '请输入正确的邮箱地址'
            }]
          }
        }
      }
    },
    onLoad() {
      this.getUser()
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
        })
      },
	  Reset(){
		  this.user.nickName = "";
		  this.user.email = "";
		  this.user.phonenumber = "";
	  },
      submit(ref) {
        this.$refs.form.validate().then(res => {
          updateUserProfile(this.user).then(response => {
			  this.$modal.msgSuccess("修改成功")
			  this.$tab.navigateTo('/pages/index/index')
			  // uni.navigateBack()
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
.top-rule {
    height: 140rpx;
    line-height: 140rpx;
    padding: 0px 40rpx;
    background-color:#3C96F3;
    border-radius: 16px 16px 0 0;
    // box-shadow: 0px 16px 26px rgba(0, 0, 0, .8);
  }
  .bottom-rule {
      height: 140rpx;
      line-height: 140rpx;
      padding: 0px 40rpx;
      // background-color:#3C96F3;
      border-radius: 0 0 16px 16px;
      // box-shadow: 0px 16px 26px rgba(0, 0, 0, .8);
    }
  .example {
    padding: 15px;
    background-color: #F3F4F6;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
</style>
